/**
 * Created by Administrator on 2017/5/16.
 */
import { Component } from '@angular/core';
@Component({
    selector:'key-up1',
    template:`
    <input (keyup)="onKey($event)" />
    <p>{{values}}</p>`
})
export class KeyupComponent1{
    values = '';
    // 非强类型
    onKey(event:any){
        this.values += event.target.value + ' | ';
    }
    // 强类型
    /*onKey(event: KeyboardEvent) {
        this.values += (<HTMLInputElement>event.target).value + ' | ';
    }*/
}

@Component({
    selector:'key-up2',
    template:`
    <input #key2 (keyup)="onKey(key2.value)"/>
    <p>{{values}}</p>`
})
export  class  KeyupComponent2{
    values = '';
    onKey(value:string){
        this.values += value + " | ";
    }
}

@Component({
    selector:'key-up3',
    template:`
    <input #key3 (keyup.enter)="values=key3.value"/>
    <p>{{values}}</p>`
})
export  class  KeyupComponent3{
    values = '';
}

@Component({
    selector:'key-up4',
    template:`
    <input #key4 (blur)="values=key4.value" (keyup.enter)="values=key4.value"/>
    <p>{{values}}</p>`
})
export  class  KeyupComponent4{
    values = '';
}